<template>
  <div>
    <div class="mall">
      <header class="header">
        <div class="item" @click="$router.push({name: 'HuiDetail'})">
          <img src="/src/assets/mall/coin.png" class="icon">
          <span class="text">我的惠币</span>
          <span class="text red">{{coin}}</span>
        </div>
        <div class="line"></div>
        <div class="item" @click="$router.push({name: 'HuiMine'})">
          <img src="/src/assets/mall/my.png" class="icon">
          <span class="text">我的兑换</span>
        </div>
      </header>
      <div class="cut-line"></div>
      <div class="mall-body">
        <div class="title">热门兑换</div>
        <div class="goods">
          <div class="item"
            v-for="v in list" :key="v.id"
            @click="$router.push({name: 'MallDetail', params: {id: v.id}})"
          >
            <img :src="v.image" class="big-img">
            <span class="text">{{v.name}}</span>
            <div class="coin">
              <img src="/src/assets/mall/small-coin.png" class="icon">
              <span class="text red">{{v.need_coin}}</span>
            </div>
            <mt-button class="red">立即抢兑</mt-button>
          </div>
          <div class="item">
            <img src="/src/assets/mall/more.png" class="big-img">
            <span class="text">更多商品、敬请期待~</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Mall',
    data () {
      return {
        list: [],
        coin: 0
      }
    },
    methods: {
      getList () {
        this.$post('/vue/hui_coin/list').then(data => {
          this.list = data.list
          this.coin = data.hui_coin
        })
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style lang="less">
  @c-53: rgb(53, 53, 53);
  @c-117: rgb(117, 117, 117);
  @c-120: rgb(120, 120, 120);
  @c-151: rgb(151, 151, 151);
  @c-173: rgb(173, 173, 173);
  @c-red: rgb(255, 129, 98);
  @c-l-white: rgb(240, 244, 247);

  .mall {
    height: 100vh;
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: scroll;
    .header {
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
      .item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 0;
        .icon {
          width: 26px;
          height: 26px;
          margin-right: 3px;
        }
        .text {
          font-size: 14px;
          line-height: 20px;
          letter-spacing: 1px;
          color: @c-53;
          &.red {
            font-size: 12px;
            line-height: 16px;
            letter-spacing: 0;
            color: @c-red;
            margin-left: 6px;
          }
        }
      }
      .line {
        width: 1px;
        height: 20px;
        background-color: @c-151;
        margin: 0 20px;
      }
    }
    .cut-line {
      width: 100vw;
      height: 5px;
      background-color: @c-l-white;
    }
    .mall-body {
      padding: 12px 15px;
      .title {
        padding-bottom: 12px;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 1px;
        color: @c-53;
        text-align: left;
      }
      .goods {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
          flex: 0 0 auto;
          width: 47.83%;
          height: auto;
          text-align: left;
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 20px;
          .big-img {
            flex: 0 0 auto;
            width: 100%;
            height: 62.315%;
          }
          .text {
            flex: 0 0 auto;
            width: 100%;
            font-size: 13px;
            line-height: 18px;
            margin-top: 10px;
            color: @c-53;
            &.red {
              color: @c-red;
              width: auto;
              margin: 0;
            }
          }
          .coin {
            width: 100%;
            flex: 0 0 auto;
            margin-top: 3px;
            img, span {
              display: inline-block;
              vertical-align: middle;
            }
          }
          .icon {
            width: 14px;
            height: 14px;
          }
          .mint-button {
            width: 66px;
            flex: 0 0 auto;
            margin-top: 6px;
            padding: 1px 0;
            border-radius: 2px;
            height: auto;
            box-shadow: none;
            display: flex;
            justify-content: center;
            &.red {
              background-color: @c-red;
            }
            .mint-button-text {
              font-size: 13px;
              line-height: 18px;
              color: #FFF;
            }
          }
        }
      }
    }
  }
</style>